<script type="text/javascript">     

// receives the value input and sets it's parent class according to input value
function SetSpecClass(e, focus){

    if (typeof focus == 'undefined' ) focus = false;
    var container = $(e).parents(".container");

    if (($.trim($(e).val())!= "") || (focus != false)){
        $(container).removeClass("unchecked");
        $(container).addClass("checked");   
    } else {  
        $(container).addClass("unchecked");
        $(container).removeClass("checked");
        $(e).val('');
    }

}

$(document).ready(function(){
                               
    //set class
    $("#specs_container input.value").each(
        function(){SetSpecClass($(this));}
    );

    //set class when value input changes or gains focus
    $("#specs_container input.value")
        .live('focus',function(){ SetSpecClass($(this), true) })
        .live('blur',function(){ SetSpecClass($(this)) });

    //clear empty specs on form submition
    $('#product_form').submit(function() {
		
        $("#specs_container .container").each(function(){            
            var value_input = $(this).find(".value");
            if ($.trim($(value_input).val()) == ''){
                $(value_input).removeAttr("name");
                $(this).find(".spec_id").removeAttr("name");
                $(this).find(".unit_id").removeAttr("name");
            };
        });
        return true;
    });

    // create new specification
    $("#create_new_spec").click(function(){
        var name = $.trim($('#new_spec_name').val());
        $.post("<?=site_url("/admin/specifications/create")?>", 
            { name: name },
            function(data){
                if(data.success==true){
                    var html_str = data.response;
                    Append_New_Spec(data.item.id, data.item.name);
                } else {
                    var html_str = data.response;
                }
                $("#new_spec_response").html(html_str).hide().fadeIn();

            }, "json"
        );
        return false;
    }); 
    //disable form submition when pressing enter on text field
    $("#new_spec_name").bind("keypress", function(e,a) {
        if (e.keyCode == 13) {
            $("#create_new_spec").click();
            return false;
        }
    });


    function Append_New_Spec(id,name){

        var html = '';
        html += '<div class="list_block container search active" style="float:left; width:auto; clear:none; margin-right:20px">';
        html += '<span class="title" style="width:140px; float:left; padding-right:5px">'+name+'</span>';
        html += '<div style="width:auto; float:left">';
        html += '   <input class="value" name="specs['+id+'][Value]" type="text" style="width:110px; margin-top:2px; margin-bottom:0px" />';
        html += '   <input class="spec_id" name="specs['+id+'][id_Specs]" type="hidden" value="'+id+'" />';
        html += '</div>';
        html += '<div style="width:auto; float:left; margin-left:5px">';
        html += '     <select name="specs['+id+'][id_Units]" class="unit_id" style="margin-top:2px; margin-bottom:0px">';
        html += '       <option value=""></option>';

        <? foreach($available_units as $unit){ ?>
        html += '<option value="<?=$unit['id_Units']?>" ><?=$unit['name_Units']?></option>';                
        <? } ?>

        html += '     </select>';
        html += '</div>';
        html += '</div>';   

        $("#specs_container").append(html);  
        $("#specs_container input.value:last").focus();
    }          


});
</script>



<div id="specs_container" class="content_block" style="width:100%; overflow:auto">

<div class="live_search_msg"></div>


<? foreach ($available_specifications as $spec){ 

    $class = ($spec["Active_Specs"]==1) ? 'active':'inactive';
    $selected = false;
    foreach ($product_specifications as $prod_spec){
        if ($prod_spec['id_Specs'] == $spec['id_Specs']) $selected = $prod_spec;
    }
    ?>

    <div class="list_block container search <?=$class?>" style="float:left; width:auto; clear:none; margin-right:20px">
        <span class="title" style="width:140px; float:left; padding-right:5px"><?=$spec['Name_Specs']?></span>
        <div style="width:auto; float:left">
            <input class="value" name="specs[<?=$spec['id_Specs']?>][Value]" type="text" style="width:110px; margin-top:2px; margin-bottom:0px" <? if ($selected != false) {?> value="<?=$selected['Value']?>"<?}?> />
            <input class="spec_id" name="specs[<?=$spec['id_Specs']?>][id_Specs]" type="hidden" value="<?=$spec['id_Specs']?>" />
        </div>
        <div style="width:auto; float:left; margin-left:5px">
            <select name="specs[<?=$spec['id_Specs']?>][id_Units]" class="unit_id" style="margin-top:2px; margin-bottom:0px">';
                <option value="" <? if(($selected != false)&&($selected['id_Units']=='')) print 'selected="selected"'?>></option>
                <? foreach($available_units as $unit){ ?>
                <option value="<?=$unit['id_Units']?>" <? if(($selected != false)&&($selected['id_Units']==$unit['id_Units'])) print 'selected="selected"'?>><?=$unit['name_Units']?></option>';                
                <? }?>
            </select>
        </div>
    </div>
<? } ?>   


</div>

<div class="content_block">
    <input type="text" id="new_spec_name" maxlength="80" style="display:inline; width:200px" />
    <a id="create_new_spec" href="#" class="button">ADD NEW</a>
    <div id="new_spec_response"></div>
</div>
